<html>
<head>

<!-- <link rel="stylesheet" type="text/css" href="test.css"/> -->

<style type="text/css">
    body { background: linear-gradient(to bottom, #7d7e7d 0%,#0e0e0e 100%);   height:100%; } 
    
    /* Outter div container. */
    div#LeftViewportOutterDiv 
    {
        position: absolute;
        top: 100px;
        left: 100px;
        border-width: 8px;
        height: 300px;
        width: 300px;
        border-color: silver;
        border-width: 2px;
        border-style: ridge;
        background: linear-gradient(to bottom, white 0%, silver 3%);
        box-shadow: 0 0 15px 0px black;
        overflow: hidden;
    }
    
    /* Special formatting for the WindowBox title. */
    span#WindowTitle
    {
        color:black;
        font-family:Tahoma, Helvetica, Arial, sans-serif;
        font-size:14pt;
        font-style:normal;
        font-variant:small-caps;
        font-weight:normal;
        line-height:normal;
        text-align:center;
        text-shadow: 1px 1px rgba(255,255,255,0.2), -1px -1px rgba(0,0,0,0.5);
        padding-left: 7pt;
        padding-top: 27pt;
    }

    /* Innder div container. */
    div#LeftViewportInnerDiv
    {
        border-top-color: silver;
        border-top-width: 2px;
        border-top-style: ridge;
        background: white;
        height: 100%;
    }
    
    /* A button to set the theme. Really, a placeholder for something more important. */
    div#ColorTheme
    {
        position:absolute;
        top:4pt;
        right:7pt;
        height:12px;
        width:12px;
        /*
         * Two gradients make up the button (to produce a more "realistic" feal).
         */
        background-image:   radial-gradient(circle closest-corner at center 1pt,  rgba(0,0,0,.3) 0%, #000000 85%), 
                            radial-gradient(circle closest-side at center, #FFFFFF 83%, #000000 7%);
        border-radius:80px;        
        border-style:double;
        border-width: thin;
        border-color:gray;
    }
    
    /*
     * Sets the look of the button when it's clicked.
     */
    div#ColorTheme:active
    {
        border-style: double;
        border-width:thin;
        border-color:white ;
        box-shadow:0px 0px 5px white;
        /* move the "light" glow */
        background-image:   radial-gradient(circle closest-corner at center 2pt,  rgba(0,0,0,.3) 0%, #000000 85%), 
                            radial-gradient(circle closest-side at center, #FFFFFF 83%, #000000 7%);
    }
</style>

</head>
<title>Test</title>

<body>
    <div id="LeftViewportOutterDiv">
        <span id="WindowTitle">Interface Status</span><div id="ColorTheme"></div>        
        <div id="LeftViewportInnerDiv">
            <p/>
            Output goes here
        </div>
    </div>
</body>
</html>


